<template>
  <view class="container">
    <div style="background-color: #ffffff; padding: 30rpx">
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
        <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
          <u-input v-model="model1.userInfo.name" border="none"></u-input>
        </u-form-item>
        <u-form-item label="手机" prop="userInfo.mobile" borderBottom ref="item1">
          <u-input v-model="model1.userInfo.mobile" border="none"></u-input>
        </u-form-item>

        <u-form-item label="角色" @click="handRole" prop="userInfo.role" borderBottom ref="item1">
          <!-- <u-input disabled v-model="model1.userInfo.role" border="none"></u-input> -->
          <uni-data-select v-model="model1.userInfo.role" :localdata="range" @change="change"></uni-data-select>
        </u-form-item>

        <u-button type="primary" @click="submit">提交</u-button>
      </u-form>
    </div>
  </view>
</template>

<script>
import { addStaff, getStaffDetail, editStaff } from "@/api/index.js";
export default {
  data() {
    return {
      model1: {
        userInfo: {
          name: "",
          mobile: "",
          role: "",
        },
      },
      show: false,
      value: 1,
      range: [
        { value: `customer_service`, text: "客服" },
        { value: "inspector", text: "巡检" },
        { value: "admin", text: "管理员" },
      ],
      id: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    console.log("options", options);

    this.id = options.id;
    if (options.id) {
      await this.getInfo(options.id);
    }
  },

  methods: {
    async getInfo(id) {
      const _data = await getStaffDetail(id);

      const obj = {
        name: _data.name,
        mobile: _data.mobile,
        role: _data.role,
      };
      this.$set(this.model1, "userInfo", obj);
    },
    change(e) {
      this.$set(this.model1.userInfo, "role", e);
    },
    handRole() {
      this.show = true;
      console.log("点击啊");
    },
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async submit() {
      let other = {};

      try {
        uni.showLoading({
          title: "提交中...",
        });
        if (this.id) {
          await editStaff({
            hospital_id: uni.getStorageSync("curHospital"),
            ...this.model1.userInfo,
            id: this.id,
          });
          uni.showToast({
            title: "修改成功",
          });
        } else {
          const _res = await addStaff({
            hospital_id: uni.getStorageSync("curHospital"),
            ...this.model1.userInfo,
          });


          uni.showToast({
            title: "添加成功",
          });
        }

        uni.hideLoading();
        this.goBack();
      } catch (error) {
        console.log('error', error);
        uni.showToast({
          title: error?.msg,
          icon: "none",
        });

        uni.hideLoading();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: rgba(246, 246, 246, 1);
  padding: 20rpx;
}
</style>
